var gulp = require('gulp')

var webserver = require('gulp-webserver') //web服务器

var sass = require('gulp-sass') //sass编译

var webpack = require('gulp-webpack') //webpack编译

var named = require('vinyl-named')

// 启动 webserver
gulp.task('webserver', function () {
  gulp.src('./dev') //gulp源目录|源文件
    .pipe(webserver({
      host: 'localhost', //主机
      port: 4000, //端口
      directoryListing: {
        enable: true, //使目录可见
        path: './dev' //目录起始位置
      },
      livereload: true //热部署
    }))
})
//拷贝html
gulp.task('copyhtml', function () {
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./dev/')) //输出目录
})

// 编译scss
gulp.task('packscss', function () {
  gulp.src('./src/styles/app.scss')
    .pipe(sass().on('error', sass.logError)) //使sass编译出错时服务器不会停止
    .pipe(gulp.dest('./dev/styles'))
})

// 引入gulp-webpack, 实现CommonJS 模块化开发
gulp.task('packjs', function () {
  gulp.src('./src/scripts/app.js')
    .pipe(named()) //获取*.js 文件名，vinyl-named模块的使用
    .pipe(webpack({
      output: {
        filename: '[name].js' //输出的文件名，name对应获取的文件名
      },
      module: {
        loaders: [
          {
            test: /\.js$/,           //正则筛选js文件
            loader: 'imports-loader',//使用imports-loader对js文件进行编译
            exclude: './node_modules'//忽略某些目录|文件
          }
        ]
      }
    }))
    .pipe(gulp.dest('./dev/scripts'))
})

gulp.task('watch', function () {
  gulp.watch('./src/styles/**/*.scss', ['packscss'])
  gulp.watch('./src/scripts/**/*.js', ['packjs'])
  gulp.watch('./src/*.html', ['copyhtml'])
})

gulp.task('default', ['webserver', 'packscss', 'packjs', 'copyhtml', 'watch'], function () {
  console.log('done.')
})
